<template>
  <div>
    <el-page-header content="添加用户" icon="" title="用户管理" />
    <el-form
      ref="userFormRef"
      :model="userForm"
      :rules="userFormRules"
      label-width="80px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" type="password" />
      </el-form-item>

      <el-form-item label="角色" prop="role">
        <el-select
          v-model="userForm.role"
          class="m-2"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="个人简介" prop="introduction">
        <el-input v-model="userForm.introduction" type="textarea" />
      </el-form-item>

      <el-form-item label="头像" prop="avatar">
        <Upload :avatar="userForm.avatar" @xuhaochange="handleChange" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()">更新提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import Upload from "@/components/upload/Upload";
import upload from "@/util/upload"
// import router from "@/router";
import {useRouter} from "vue-router"

const userFormRef = ref();
const userForm = reactive({
  username: "",
  password: "",
  role: 2, //2默认编辑
  introduction: "",
  avatar: "",
  file: null,
  gender:0
});

const userFormRules = reactive({
  username: [{ required: true, message: "请输入名字", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  role: [{ required: true, message: "请选择权限", trigger: "blur" }],
  introduction: [{ required: true, message: "请输入介绍", trigger: "blur" }],
  avatar: [{ required: true, message: "请上传头像", trigger: "blur" }],
});

//下拉选项
const options = [
  {
    label: "管理员",
    value: 1,
  },
  {
    label: "编辑",
    value: 2,
  },
];

const handleChange = (file) => {
  userForm.avatar = URL.createObjectURL(file);
  userForm.file = file;
};

const router = useRouter()
//更新提交
const submitForm = ()=>{
        userFormRef.value.validate(async(valid)=>{
            if(valid){
                await upload("adminapi/user/add",userForm)

                router.push(`/user-manage/userlist`) //路由跳转页面
                // const res = await upload("adminapi/user/add",userForm)
                // if(res.ActionType==="ok"){
                //         store.commit("changeUserInfo",res.data)
                //         ElMessage.success("更新成功")
                //     }
            }
        })
    }
</script>

<style scoped lang="scss">
.demo-ruleForm {
  margin-top: 50px;
}
.el-row {
  margin-top: 20px;
  .box-card {
    text-align: center;
  }
}
</style>
